<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: 48px;

            --iphone-black-bg: #000;
            --iphone-black-text: #f2f2f2;

            --iphone-white-bg: #fff;
            --iphone-white-text: #8b8b99;
            --iphone-white-text-highlight: #1d1d1f;

            --iphone-red-bg: #960b19;
            --iphone-red-text: #e57571;
            --iphone-red-text-highlight: #f5f5f7;

            --iphone-width: 460px;
            --iphone-offscreen: -720px;
        }

        body {
            margin: 0;
            height: 4000px;
            font-family: Helvetica;
            background-color: #000;
        }

        .sticky-container {
            position: sticky;
            top: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .sticky-container .iphone {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
        }

        .sticky-container .iphone h3 {
            font-size: 1rem;
            margin: 0 0 60px 0;
            width: var(--iphone-width);
        }

        .sticky-container .iphone img {
            display: block;
            width: var(--iphone-width);
            margin-bottom: var(--iphone-offscreen);
        }

        .sticky-container .iphone.black {
            background-color: var(--iphone-black-bg);
            z-index: 10;
        }

        .sticky-container .iphone.black h3 {
            color: var(--iphone-black-text);
        }

        .sticky-container .iphone.white {
            background-color: var(--iphone-white-bg);
            z-index: 20;

            clip-path: inset(100% 0px 0px 0px);
        }

        .sticky-container .iphone.white h3 {
            color: var(--iphone-white-text);
        }

        .sticky-container .iphone.white h3 span {
            color: var(--iphone-white-text-highlight);
        }

        .sticky-container .iphone.red {
            background-color: var(--iphone-red-bg);
            z-index: 30;

            clip-path: inset(100% 0px 0px 0px);
        }

        .sticky-container .iphone.red h3 {
            color: var(--iphone-red-text);
        }

        .sticky-container .iphone.red h3 span {
            color: var(--iphone-red-text-highlight);
        }

        .sticky-container.no-sticky {
            position: relative;
            overflow: visible;
        }

        .sticky-container.no-sticky .iphone {
            position: relative;
        }

        .sticky-container.no-sticky .iphone.red {
            padding-bottom: calc(var(--iphone-offscreen) * -1);
        }
    </style>
</head>
<body>
<!--
https://www.apple.com/v/iphone-se/b/images/overview/finishes_black__b06syayq94wi_medium_2x.png
https://www.apple.com/v/iphone-se/b/images/overview/finishes_white__drv9fwq9vzwy_medium_2x.png
https://www.apple.com/v/iphone-se/b/images/overview/finishes_red__eqfv1ongy282_medium_2x.png
-->

<div class="sticky-container">
    <div class="iphone black">
        <h3>
            Comes in Black.<br>
            &nbsp;
        </h3>
        <img src="./assets/finishes_black__b06syayq94wi_medium_2x.png">
    </div>
    <div class="iphone white">
        <h3>
            Comes in Black.<br>
            <span>White</span>
        </h3>

        <img src="./assets/finishes_white__drv9fwq9vzwy_medium_2x.png">
    </div>
    <div class="iphone red">
        <h3>
            Comes in Black.<br>
            White. <span>And Pow.</span>
        </h3>

        <img src="./assets/finishes_red__eqfv1ongy282_medium_2x.png">
    </div>
</div>
<script>
  window.addEventListener('scroll', (e) => {
    let noStickyOffset = document.documentElement.clientHeight * 2
    let scrolled = document.documentElement.scrollTop / noStickyOffset

    let $white = document.querySelector('.white')
    let $red = document.querySelector('.red')

    $white.style.clipPath = `inset(${((0.5 - scrolled) / 0.5) * 100}% 0px 0px 0px)`
    $red.style.clipPath = `inset(${((1 - scrolled) / 0.5) * 100}% 0px 0px 0px)`

    if (scrolled >= 1) {
      document.querySelector('.sticky-container').classList.add('no-sticky')
    } else {
      document.querySelector('.sticky-container').classList.remove('no-sticky')
    }
  })
</script>
</body>
</html>